<template>
  <div>
    <br>
    <el-card>
      <el-alert>普通的数据,直接使用storeToRefs,获取到的数据,是响应式的,如果数据变化,页面会自动更新</el-alert>
      <hr>
      <div>AAAVersion:{{ version.homeAAA }}</div>
      <div>AAA:{{ homeAAA }}</div>
      <div>BBBVersion:{{ version.homeBBB }}</div>
      <div>BBB:{{ homeBBB }}</div>
    </el-card>
    <el-card>
      <el-alert>echarts的数据直接使用就行,例如:homeStore.homeEcharts1Data  但是要watch监听pinia的数据变化,然后重新渲染</el-alert>
      <hr>
      <div>homeEcharts1DataVersion:{{ version.homeEcharts1Data  }}</div>
      <br>
      <div class="echart-box">
        <div class="chart" id="testEcharts"></div>
      </div>
    </el-card>
    <el-card style="line-height:30px;font-size:20px">
        <pre>
          1.根据页面的名字不同,再api/path/module分出4个模块,每个模块的接口写在对应的文件中,界面方法名的命名规则是模块名+方法名,例如:homeEcharts1Data
          2.每个方法名和pinia的数据名保持一致例如homeEcharts1Data, pinia home 里面 也有对应的state homeEcharts1Data
          3.方法名和后端返回的版本号的key名的映射关系要填写到Utils/dict 文件中
          4.pinia文件中,根据模块名,分出4个文件,每个文件是一个store,他们都有一个getAll方法
          5.getAll方法实现了,根据版本号的异同,来决定是否调用接口,如果版本号不同,就调用接口,如果版本号相同,就不调用接口
          6.all接口,预期返回的格式如下.  key的命名规则  类型_handle_接口名  home_distributor_distributorstatisticinfo
          {"code":0,"msg":"ok","data":{"home_aaa":"1111","home_bbb":"222","home_echarts1Data":"1"}}
          7.每个echarts文件直接使用数据内容,如homeStore.homeEcharts1Data, 然后需要watch监听
          8.页面定时器的默认时间,写在配置文件中Utils/setting.ts DEFAULT_TIMER(Utils 注意U大写)
        </pre>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/module/home'
import { onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import { DEFAULT_TIMER } from '@/Utils/setting'

const homeStore = useHomeStore() // 创建store实例

// 响应式的形式获取到store中的数据
const { homeAAA, homeBBB, version } = storeToRefs(homeStore)


// 创建echarts图表
const createChart = () => {
  const myChart = echarts.init(document.getElementById('testEcharts'))
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '饼图测试',
        type: 'pie',
        radius: '50%',
        data: homeStore.homeEcharts1Data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  // 绘制图表
  myChart.setOption(option)
}

// 如果是供应商界面直接onMounted中调用 , 如果是业绩,财务,或者供应链,直接大球加载后,调用getAll方法
onMounted(() => {
  getAll()
  createChart()
})

watch(
  () => homeStore.homeEcharts1Data,
  () => {
    createChart()
  },
  { deep: true }
)

onUnmounted(() => {
  clearInterval(timer)
})

let timer = null // 定时器
const getAll = () => {
  // 第一次的时候调一遍
  homeStore.getAll()
  // 之后每隔5秒调一次
  timer = setInterval(() => {
    homeStore.getAll()
  }, DEFAULT_TIMER)
}
</script>

<style lang="scss" scoped>
.echart-box {
  width: 350px;
  height: 350px;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
